<template>
  <div class="order-list-container">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline" size="mini">
      <el-form-item>
        <el-input
          v-model="searchParams.mobile"
          placeholder="用户手机号"
          oninput = "value=value.replace(/[^\d]/g,'')"
          maxlength="11"
          clearable
          show-word-limit
          style="width: 150px;margin-bottom: 5px"/>
      </el-form-item>

      <el-form-item>
        <el-input
          v-model="searchParams.courseName"
          placeholder="课程名"
          maxlength="100"
          show-word-limit
          clearable
          style="width: 250px"/>
      </el-form-item>

      <el-form-item>
        <el-input
          oninput = "value=value.replace(/[^\d]/g,'')"
          maxlength="19"
          clearable
          show-word-limit
          v-model="searchParams.orderId"
          placeholder="订单编号"
          style="width: 180px"/>
      </el-form-item>

      <el-form-item>
        <el-input
          oninput = "value=value.replace(/[^\d]/g,'')"
          maxlength="50"
          clearable
          show-word-limit
          v-model="searchParams.trade"
          placeholder="支付流水号"
          style="width: 250px"/>
      </el-form-item>

      <el-form-item>
        <el-form-item>
          <el-select v-model="searchParams.status" clearable placeholder="订单状态" style="width: 130px">
            <el-option :value="0" label="未支付"/>
            <el-option :value="1" label="已支付"/>
            <el-option :value="2" label="已关闭"/>
          </el-select>
        </el-form-item>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="fetchData()" size="mini">查询</el-button>
      <el-button type="warning" icon="el-icon-refresh" @click="resetData()" size="mini">清空</el-button>

      <el-form-item prop="date" label="支付时间：">
        <el-date-picker
          v-model="date"
          type="daterange"
          align="right"
          unlink-panels
          value-format="yyyy-MM-dd"
          range-separator="至 "
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
    </el-form>

    <!--表格-->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="数据加载中"
      border
      fit
      highlight-current-row>

      <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="orderId" label="订单号" align="center" width="200"/>

      <el-table-column prop="courseName" label="课程名称" align="center" />

      <el-table-column prop="teacherId" label="讲师详情" align="center" width="120">
        <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="showTeacherInfo(scope.row.teacherId)">讲师详情</el-button>
        </template>
      </el-table-column>

      <el-table-column prop="nickName" label="用户详情" align="center" width="120">
        <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="showUserInfo(scope.row.userId)">用户详情</el-button>
        </template>
      </el-table-column>

      <el-table-column prop="status" label="订单状态" align="center" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0">未支付</el-tag>
          <el-tag type="success" v-if="scope.row.status === 1">已支付</el-tag>
          <el-tag type="danger" v-if="scope.row.status === 2">已关闭</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="paid" label="支付金额" align="center" width="100">
        <template slot-scope="scope">
          {{ scope.row.paid + '.00' }}
        </template>
      </el-table-column>

      <el-table-column prop="payTime" label="支付时间" width="180" align="center"/>

    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="fetchData"
    />


    <!-- 用户详情 dialog -->
    <UserView ref="userView"/>

    <!-- 讲师详情 dialog -->
    <TeacherView ref="teacherView"/>

  </div>
</template>

<script>
  import { getOrderPageList } from '@/api/order'
  import UserView from '@/views/order/userView'
  import TeacherView from '@/views/order/teacherView'

  export default {
    data(){
      return{
        listLoading: true, // 是否显示loading信息
        list: null, // 数据列表
        total: 0, // 总记录数
        page: 1, // 页码
        limit: 10, // 每页记录数
        searchParams: {},// 查询条件
        date: '', //日期
        pickerOptions: {
          //不可选择当天以后日期
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6;
          },

          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          },]
        },
      }
    },
    methods: {
      fetchData(page = 1){
        if (this.date){
          this.searchParams.begin = this.date[0]
          this.searchParams.end = this.date[1]
        }

        // 当点击分页组件的切换按钮的时候，会传输一个当前页码的参数page
        this.page = page
        this.listLoading = true

        getOrderPageList(this.page,this.limit,this.searchParams)
          .then(result => {
            if (result.success == true){
              this.list = result.data.rows
              this.total = result.data.total
            }
            this.listLoading = false
          })
      },

      resetData() {
        this.date = ''
        this.searchParams = {}
        this.fetchData()
      },

      showTeacherInfo(teacherId){
        this.$refs.teacherView.open(teacherId)
      },

      showUserInfo(userId){
        this.$refs.userView.open(userId)
      }
    },
    created() {
      this.fetchData()
    },
    components:{
      UserView,
      TeacherView
    }
  }
</script>

<style scoped>
  .order-list-container{
    margin-top: 20px;
    margin-left: 15px;
  }
  .el-form-item{
    margin-bottom: 8px;
  }
</style>
